import * as React from 'react';
import Header from '@/commonComponents/header/Header';
import useAuth from '@/utils/hooks/useAuth';
import UserHeader from '@/commonComponents/userHeader/index';
import { List, Button, Form, Input, Toast } from 'antd-mobile';
import { UnlockOutline } from 'antd-mobile-icons';
import { getToken, getUserInfo } from '../../utils/localStorge';
import { useNavigate } from 'react-router-dom';
import './index.module.scss';
const { useEffect, memo, useState } = React;

interface formDataProps {
  newpwd: string;
  againpwd: string;
}

function Modifypwd() {
  const token = getToken();
  const { back } = useAuth();
  const [form] = Form.useForm();
  const formData = { newpwd: '', againpwd: '' };
  const navigate = useNavigate();
  const modifyPwd = (val: formDataProps) => {
    localStorage.setItem('password', val.newpwd);
    Toast.show({
      icon: 'success',
      content: '保存成功',
      duration: 1200,
      afterClose: () => {
        navigate('/user');
      },
    });
  };
  return (
    <div styleName="modifypwd-content">
      <Header
        title={``}
        onBack={back}
        style={{
          background: '#fff',
          color: '#333',
        }}
        type={1}
      />
      <div styleName="notice-word">
        <div styleName="word1">设置密码</div>
        <div styleName="word2">请为你的账号设置新的密码</div>
      </div>
      <Form
        form={form}
        layout="horizontal"
        mode="card"
        initialValues={formData}
        onFinish={modifyPwd}
        footer={
          <Button type="submit" styleName="modify-btn" fill="solid">
            确认修改
          </Button>
        }
      >
        <Form.Item
          name="newpwd"
          rules={[
            { required: true, message: '新密码不能为空!' },
            { type: 'string', min: 8, max: 30, pattern: /.{8,30}/ },
          ]}
        >
          <Input
            placeholder="请输入8-30为字符作为新密码"
            type="password"
            clearable
          />
        </Form.Item>
        <Form.Item
          name="againpwd"
          rules={[
            { required: true, message: '确认密码不能为空!' },
            { type: 'string', min: 8, max: 30 },
            ({ getFieldValue }) => ({
              validator(rule, value) {
                if (!value || getFieldValue('newpwd') === value) {
                  return Promise.resolve();
                }
                return Promise.reject('两次密码输入不一致');
              },
            }),
          ]}
        >
          <Input type="password" clearable placeholder="请再次输入密码" />
        </Form.Item>
      </Form>
    </div>
  );
}

export default memo(Modifypwd);
